<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>防抖和节流</title>
</head>

<body>

  <input type="text" id="input" />
  <script>
    const input = document.querySelector('#input')

    input.addEventListener('input', debounce(callback, 3000))
    document.addEventListener('mousemove', throttle(() => {
      callback("节流滑动");
    }, 2000))

    // 防止抖动，在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
    function debounce(fn, delay) {
      let timer = null;
      return function (...args) {
        let context = this;
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          fn.apply(context, args)
        }, delay);
      }
    }
    // 函数节流:规定在一个单位时间内，只能触发一次函数。如果这个函数单位时间内触发多次函数，只有一次生效。
    function throttle(func, wait) {
      var timeout = null
      return function () {
        context = this
        args = arguments
        if (!timeout) {
          timeout = setTimeout(() => {
            timeout = null
            func.apply(context, args)
          }, wait)
        }
      }
    }

    function callback(content = 'content') {
      console.log('执行回调:' + content)
    }
  </script>
</body>

</html>